<template>
  <div class="divKing">
<!--    <template  v-for="(menuZi,indexOne) in props.MenuZi">-->
<!--      <el-submenu  :index="indexOne" v-if="menuZi.menuList!=null">-->
<!--        &lt;!&ndash;      <i :class="menu.icon"></i>&ndash;&gt;-->
<!--        <span >{{menuZi.menuName}}</span>-->
<!--        <HomeMenu :MenuZi="menuZi.menuList" :if="menuZi.menuList!=null"></HomeMenu>-->
<!--      </el-submenu>-->

      <!--  <el-menu-item-group v-for="(menuZi,indexOne) in props.MenuZi">-->
      <!--    <el-menu-item :index="menuZi.id" :route="{path:`${menuZi.path}`}" >{{ menuZi.menuName }}</el-menu-item>-->
      <!--    <HomeMenu :MenuZi="menuZi.menuList" :if="menuZi.menuList!=null"></HomeMenu>-->
      <!--&lt;!&ndash;    <el-submenu>&ndash;&gt;-->
      <!--&lt;!&ndash;      <el-menu-item index="2-1" :route="{ path: '/myattendance' }">2</el-menu-item>&ndash;&gt;-->

      <!--&lt;!&ndash;    </el-submenu>&ndash;&gt;-->
      <!--  </el-menu-item-group>-->

<!--    </template>-->
      <template v-for="menu in props.MenuZi">
        <el-sub-menu :key="menu.id" :index="menu.id" v-if="menu.menuList !== undefined && menu.menuList.length > 0">
          <template #title>
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.menuName}}</span>
          </template>

          <HomeMenu :MenuZi="menu.menuList"></HomeMenu>
        </el-sub-menu>
        <el-menu-item :key="menu.id"  :index="menu.id" :route="{path:`${menu.path}`}" v-else>
          <i :class="menu.icon"></i>
          <span slot="title"> {{menu.menuName}}</span>
        </el-menu-item>
      </template>


<!--    <template v-for="menu in props.MenuZi">-->
<!--      <el-sub-menu  :index="menu.id" v-if="menu.menuList!==[]" >-->

<!--&lt;!&ndash;          <i :class="menu.icon"></i>&ndash;&gt;-->

<!--          <el-menu-item  :index="menu.id" :route="{path:`${menu.path}`}" >-->
<!--            &lt;!&ndash;        <i :class="menu.icon"></i>&ndash;&gt;-->
<!--            <span slot="title" >{{menu.menuName}}</span>-->

<!--          </el-menu-item>-->

<!--        <HomeMenu :MenuZi="menu.menuList"></HomeMenu>-->

<!--      </el-sub-menu>-->
<!--      <el-menu-item  :index="menu.id" :route="{path:`${menu.path}`}"  v-else>-->
<!--&lt;!&ndash;        <i :class="menu.icon"></i>&ndash;&gt;-->
<!--       <span slot="title"> {{menu.menuName}}</span>-->

<!--      </el-menu-item>-->
<!--    </template>-->

  </div>

</template>
<script setup>

import { toRefs, defineProps } from 'vue'
import HomeMenu from './HomeMenu.vue'
const props =defineProps ({
  MenuZi: {
  type: Object,
},
});
</script>

<style scoped>
.spanking{

}

</style>